Dataperiode: nettdesign
(3 uker, ca. 30 timer)
Hvor langt er du kommet?
Hva kan elevene? Har de laget sider før? La elevene sammenligne de sidene de alt har laget i Photoshop og bedømme dem. • Hva la du vekt på da du lagde din side? • Hva vil jeg formidle? • Hva liker du? • Hva er ikke fullt så godt? • Hvem er målgruppen for nettsiden? • Hva er egenskapene ved en god nettside?
Hva er en god nettside?
• Tilfredsstiller den både mine og brukerens behov? ◦ Din målsetning <- En god nettside -> Brukerens ønsker • Markører ◦ Seriøsitet ◦ Målgruppe ◦ Funksjoner ◦ Verdier • Godt og fengende språk, ord som er ◦ Enkle ◦ Beskrivende ◦ Konkrete ◦ Substantiver ◦ Løsninger ◦ Beskriv brukerens behov ◦ Beskriver ikke brukeren ◦ Ingen nydannelser • Morville-modellen 1. Nyttig ▪ Godt innhold: Relevant, korrekt, oppdatert og lett tilgjengelig 2. Attraktiv ▪ Godt design: Pent, praktisk, standardskrifter, kontrast, lesbarhet, bilder m.m. og god struktur 3. Tilgjengelig ▪ For ulike nettlesere og plattformer: Følg standardene, valider siden ▪ Blinde og svaksynte (WAI) 4. Troverdig ▪ Design, struktur, fokus, motivasjon, nyttig, nøyaktig ▪ Eksperter som leser om eget fag: Kvaliteten er avgjørende 5. Lett å finne ▪ Trekker ned: Rammer, bildekart, multimedia, java, stadig skiftende sesjons-ID som URL, meta refresh, mus over på lenker, nedtrekksmenyer 6. Brukervennlig ▪ Lett å finne fram, lesbar, klar, tydelig og mange momenter som alt er nevnt Grunnleggende html
Konvensjoner
• Alle tagger starter med < og slutter med > • / settes inn når man vil lukke taggområdet • " brukes til å utheve verdier/valg • NB: Vær pinlig nøyaktig! • For å skape oversikt og struktur ◦ Linjeskift markerer en ny tagg ◦ innrykk brukes til å markere hva som er underordnet et annet element • Oppbygningen av en nettside
De viktigste HTML-kodene
Tag Beskrivelse Dokumentramma
Selve visningsområdetLinjeskift
til Forskjellige overskrifter
Vannrett linje Unummerert liste Nummerert liste - Listeelement
Avsnitt
Tabell, hovedtagg En rad i en tabell En kolonne i en rad Grupper elementer, som en blokk (Linjeskift før og etter) Grupper elementer, vanlig (uten linjeskift før og etter) Område for metainformasjon om dokumentet Dokumentnavnet Metainformasjon om dokumentet Lenke til f.eks et stilsettVanlige eksempler
Aller første linje, før (angir hva slags dokument du skriver)
Innenfor head-taggen
Nettsidens navn css"> Innenfor body-taggen
Celle en Celle to
- Punkt en
-
- Punkt to
-
Stikkord
• Konvensjoner: Skrivemåte, tagger, egenskaper og verdier • Viktig: Skill mellom form og innhold, dvs. formater mest mulig med css • NB: Vær pinlig nøyaktig! • God skrivepraksis: ◦ innrykk ◦ valg av linjeskift ◦ tabeller bare til tabeller (sparer plass, lettere å endre og vedlikeholde og mer fleksibelt, bl.a. for leselister) ◦ Ikke bruk rammer (kan ikke lenkes til, vanskelig å bruke, mindre tilgjengelig, mindre brukervennlig for leselister o.l.) ◦ OBS: Søppelpost, ikke e-postadresser i klartekst! • En nettsides tre grunnelementer: html, head og body (se rammeillustrasjonen ovenfor) • Grunnleggende formatering: em/i strong/b u p h1--h6 (NB: em, i, strong, b og u bør heller angis med css) • I
: Metainformasjon (DOCTYPE, lang m.m.), tittel og css-lenke • Bilder: img (og width, height og alt) • Lenker: a (og href title #) • Annet: br div span • Tabeller; table, th, td og tr • Ordnede og uordnede lister: ul, ol, li • ◦ Avansert: skjemaer (form input label m.m.)Grunnleggende css
Konvensjoner
• Alle tagger starter med { og slutter med } • Hver verdiangivelse avsluttes med ; • : settes mellom angivelsen og verdien (se eksempelet nedenfor) • " brukes til å utheve verdier/valg • For å skape oversikt og struktur ◦ Linjeskift markerer en ny tagg ◦ innrykk brukes til å markere hva som er underordnet et annet element • /* Dette er en css-kommentar */
Med et stilsett kan man bestemme hvordan et html-dokument skal se ut. Alle HTML-tagger kan man angi egenskapene til. F.eks. vil man ofte endre body (hele dokumentet), H1, H2 osv (overskrifter), P (avsnitt), img (bilder) og A (lenker).
Eksempel body { color: red; /* NB: Farger anbefales det helst å angi som fargekoder, likevel virker fargenavn også helt fint */ background: yellow; background-image: url("mitt_bakgrunnsbilde.png"); /* NB: Bruk enten en bakgrunnsfarge eller et bakgrunnsbilde */ text-align: center; font-weight: bolder; text-decoration: underline; }
Html-kode
Innholdet i div-taggen som skal sentreres Tilhørende css-kode (velg en av disse to) div.midtstilt { margin-left: 30%; margin-right: 30%; width: 40%; } /* flytende bredde */ div.midtstilt { margin-left: auto; margin-right: auto; width: 300px; } /* Fast bredde */
/* NB: Hvis det er et bilde, bruk også koden over, men legg til «display: block;» i stilsettet. */ Viktige tagger
• body, p, img • div og span • For tekst ◦ color ◦ background ◦ font-weight ◦ text-decoration ◦ text-align ◦ a (a:hover, a:active, a:visited) ◦ :first-line ◦ :first-letter • For blokkelementer ◦ padding ◦ border (eksempel: border: 1px solid blue;) /* Solid kan f.eks. erstattes med dotted eller dashed */ ◦ margin • .klassenavn • #identifikasjonsmerke
Blokkmodellen
Avstanden mellom ramma og blokkelementet gir luft rundt bildet (padding). Avstanden mellom ramma og omgivende elementer er margen (margin).
Stikkord
• Konvensjoner: Skrivemåte, egenskaper og verdier • body: color og background (bilde, farge, fast/flytende o.l.) • * gjelder alle elementer • Typiske tilpasninger: Størrelse (px, em, mm, cm, pt, %), farge (navn, #RGB, #RRGGBB o.l.), plassering (absolutt, relativ, fast m.m.) • Tilpasninger for hver av taggene • span (inline) som eget element og til egne stiler, ID og class for egne stiler • hierarkiet • Om blokkelementer, blokkløst (inline) og lister • Om boksmodellen: margin, padding og border (oppe, høyre, nede, venstre -- eller o+n, h+v) • Plassering: Om float • pseudo-klasser og -elementer (a:hover p:first-letter o.a.) • Avansert: ◦ Sammenheng (f.eks. b i en div) ◦ Arving av egenskaper fra et overordnet til et underordnet element ◦ Tilordning: Lokalt, for en nettside og i en egen fil ◦ Konflikter, hva nå? Hvordan prioriteres valgene dine? http://www.w3.org/TR/CSS2/cascade.html#specificity • Godt eksempel: http://www.htmldog.com/guides/cssbeginner/conclusion
Konkrete tips
Nyttig: • CSS-meny (vannrett og loddrett) • Midtstilling ◦ img { margin: 0 auto; width: 200px } /* Width er lik bredden på bildet */ • Meny
Midstilt ramme (vannrett) div.midtstilt1 { margin-left: 10%; margin-right: 10%; } /* flytende bredde */ div.midtstilt2 { margin-left: auto; margin-right: auto; width: 850px; } /* Fast bredde */
Egne testsider http://bojer.no/Axel/nettsidetips.shtml # Min oppsummering av noen css-tips http://bojer.no/Axel/Testsider/testside-hover-meny.shtml # Fem eksempler på nedtrekksmenyer med ren css http://bojer.no/Axel/Testsider/testside-hover.shtml # Tre eksempler på bilder som vises ved mus-over Midstilt 1 Midstilt 2 Midstilt 3 (rose) # Tre eksempelsider med midstilling http://bojer.no/Axel/Testsider/testside-diverse.shtml # Blanding av tekst og bilder, bildekart http://bojer.no/Axel/Testsider/testside-bildesirkel.html # Bilder i en ramme i en sirkel og med mus-over http://bojer.no/Axel/Testsider/testside-bokser.html # Div- blokker med ulike valg for taggen «position»
Annet
• Rettigheter: Wikipedia og andre frie kilder • Nettvett og copyright • Bruk av FTP (FireFTP + putty (ssh) ) Nyttige nettsider
Nettdesign http://www.nettredaktor.no/Fakta_om_Web/ ?module=Articles;action=Article.publicShow;ID=2262 http://www.nettredaktor.no/Fakta_om_Web/Begreper/ http://www.maxdesign.com.au/articles/checklist # Liste over alt en god nettside bør ha http://www.mardiros.net/liquid-design.html # Om flytende design, tilpasningsdyktige sideoppsett http://no.wikipedia.org/wiki/Peter_Morville http://en.wikipedia.org/wiki/Peter_Morville http://en.wikipedia.org/wiki/Tableless_web_design # Hvorfor css er bedre egnet enn tabeller til sideoppsett http://en.wikipedia.org/wiki/CSS_framework # Ferdiglagde stilsett for store nettsteder
Grunnleggende om å lage nettsider http://css.maxdesign.com.au/ # Flotte trinn- for-trinn-veiledninger med css og html http://www.htmldog.com # Oversiktlig og ryddig side for både nybegynnere og viderekomne http://www.tizag.com/cssT # Innføring i css og html + eksempler
Fargekoder http://www.html-color-names.com # Liste over fargenavnene http://www.w3schools.com/tags/ref_colornames.asp # Liste over fargekodene http://www.lynda.com/resources/webpalette.aspx # 216 Nettsikre farger (de 40 siste av de 256 er ulike på pc og mac) http://en.wikipedia.org/wiki/Dither#Digital_photography_and_image_processing -- eksempelbilde med og uten nettsikre farger http://en.wikipedia.org/wiki/Web_colors # bakgrunnsinformasjon m.m.
Nyttige verktøy http://browsershots.org # Sjekk nettsiden din i en hel menge ulike nettlesere http://html-color-codes.com/ # Finn fargekoden for din farge http://notepad-plus.sourceforge.net/uk/site.htm # Skriv html og css som ren tekst i Windows http://www.html-kit.com/favicon # Lag ditt eget favicon http://www.problogineer.com/how-to-do-force-refresh-firefox # Tvungen omstart av Firefox http://www.cubestat.com/ # Statistikk for en valgt nettside http://www.allfreebackgrounds.com # Gratis bakgrunnsbilder http://www.webpagebackground.com # Gratis bakgrunnsbilder http://www.grsites.com/ # Gratis bakgrunnsbilder, knapper m.m. http://silviahartmann.com/background-tile/ # Nydelige naturbakgrunner, fliser http://www.image-maps.com/ # Lag bildekart automatisk
HTML http://www.w3schools.com/html/default.asp # Grunnleggende om html (en) http://www.htmldog.com/guides/htmlbeginner # Grunnleggende om html (en) http://www.web-amp.com/html/ # Grunnleggende om html (no)
CSS http://www.2tp.no/webdesign/css/ # Norsk side om css http://www.garshol.priv.no/download/text/css-intro.html # Innføring i css (norsk) http://www.maxdesign.com.au/articles/workshop/ # Om grunnleggende css http://www.maxdesign.com.au/articles/process/ # Hvordan lage en god nettside med css http://www.w3schools.com/css/ # Grunnleggende om css http://www.lesliefranke.com/files/reference/csscheatsheet.html # en nettside med kort oversikt over css-kodene http://www.csscentering.com/css-examples/css-examples-index.html # Eksempler som viser effekten av mange ulike css-valg http://articles.sitepoint.com/article/introduction-css-shorthand # Plassbesparende kortformer http://www.456bereastreet.com/archive/200502/ efficient_css_with_shorthand_properties/ http://www.veign.com/downloads/guides/qrg0007.pdf # Tosiders utskrivbar oversikt over alle css-kodene http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ # En sides utskrivbar oversiktsark over css-kodene http://www.blooberry.com/indexdot/css/propindex/all.htm # Alfabetisk oversikt over alle css-kodene, avansert http://www.csszengarden.com/tr/norwegian/?cssfile=/207/207.css&page=0 # Viser styrken ved css med gode eksempler http://www.barelyfitz.com/screencast/html-training/css/positioning/ # Plassering av elementer forklart en og en http://www.sohtanaka.com/web-design/beginners-checklist-debugging-css-bug/
Htm- og Css-triks http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses- compared/ http://www.smashingmagazine.com/2009/07/20/50-new-css-techniques-for-your-next- web-design/ http://www.sohtanaka.com/web-design/css-beginners-do%E2%80%99s-and- dont%E2%80%99s-part-2/ http://www.sohtanaka.com/web-design/css-beginners-dos-and-donts-part-1/ http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml # css-triks http://www.dynamicdrive.com/style/csslibrary # Mange gode css-eksempler til ulike formål http://matthewjamestaylor.com/blog # Mange gode css-eksempler til ulike formål http://www.the-art-of-web.com/css # css-eksempler til ulike formål http://www.w3schools.com/css/css_positioning.asp # Generelle regler for plassering av elementer med css http://www.maxdesign.com.au/articles/center # Vannrett sentrering med css, tre eksempler http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross- browser-support http://matthewjamestaylor.com/centered-menus/ # Vannrett midtstilt css-meny http://www.bjornenki.com/translations/w3_style_examples_007_center # Om css og sentrering av blokkelementer http://css-discuss.incutio.com/wiki/Centering_Block_Element # Vannrett sentrering med css http://blog.themeforest.net/tutorials/vertical-centering-with-css # Loddrett sentrering med css, mange forslag, godt forklart http://www.webtoolkit.info/css-vertical-align.html # Loddrett sentrering med css (display: table;) http://www.sitecrafting.com/blog/to-center-div/ # Loddrett sentrering av en div-ramme med css (vha. 50%+50%+nestet div) http://www.emblematiq.com/blog/vertical_align_with_css/assets/03.html # Loddrett sentrering med css (både for IE og andre) http://www.jakpsatweb.cz/css/css-vertical-center-solution.html # Loddrett sentrering med css (vha. plassering og nestede div-tagger) http://d-graff.de/fricca/center.html # Loddrett sentrering med css. Omfattende løsning, men ser bra ut http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css # Loddrett sentrering med css, omfattende forklaring http://tom.me.uk/html-to-css/center-vertically.html # Loddrett sentrering med css, en løsning. NB: Ikke for IE! http://htmlhelp.com/reference/css/text/vertical-align.html # Forklaring av egenskapen «vertical-align» mht. bilder http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm # Flyt tekst rundt et ujevnt bilde http://www.seoconsultants.com/css/menus/tutorial/ # Veiledning: Lag menyer med css http://www.cssmenumaker.com/ # Nett-verktøy for å lage css-menyer http://www.cssnewbie.com/horizontal-dropdown-menus/ # Lag menyer med css http://ago.tanfa.co.uk/css/examples/menu/tutorial-v.html#vs2 # Dynamisk meny med css, grundig forklart http://www.w3.org/TR/CSS2/cascade.html#specificity # Beregn hvor stor vekt en regel har i css over en annen http://www.pixy.cz/blogg/clanky/csshiermenu/ # Dynamisk meny med css NB: Ikke for IE! http://www.alistapart.com/articles/taminglists/ # Gode eksempler på liste-egenskaper http://www.instantshift.com/2009/01/11/30-excellent-css-based-navigation-and- buttons-tutorial http://www.communitymx.com/content/article.cfm?page=2&cid=53F70 # Støtte for liksom-tabeller med css, egenskaper http://www.w3schools.com/css/pr_class_display.asp # Støtte for liksom-tabeller med css, egenskaper http://www.quirksmode.org/css/display.html # Støtte for liksom-tabeller med css, egenskaper http://www.kavoir.com/2009/02/css-text-over-image.html # Eksempel: tekst over et bilde med css http://www.xs4all.nl/~peterned/csshover.html # mus-over- effekter, grundig forklaring http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css # Vis noe annet når musa holdes over http://www.webmasterworld.com/forum83/4224.htm # Vis noe annet når musa holdes over (forumposting) http://www.sohtanaka.com/web-design/css-on-hover-image-captions # Vis noe annet når musa holdes over (med eksempelside) http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger http://www.position-relative.com/tutorials/tute1_css_bg_image.php # Lag bildekart med css, enkelt eksempel uten mus-over http://css.flepstudio.org/en/css-tutorials/image-map-in-css.html # Lag bildekart med css, enkelt eksempel uten mus-over http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide- http://designreviver.com/tutorials/css-image-map-techniques-and-tutorials # Lag bildekart med css http://www.cssplay.co.uk/menu/imap.html # Lag bildekart med css http://www.frankmanno.com/ideas/css-imagemap # Lag bildekart med css http://www.webreference.com/programming/image_map http://wellstyled.com/css-underscore-hack.html # Lag kode som bare virker i IE http://www.display-inline.fr/projects/css-gradient/ # css3: lag fargeoverganger med css http://www.dynamicdrive.com/style/csslibrary/item/ css3_rounded_corners_using_border_radius # css3: avrundede hjoerner http://www.digi.no/838046/%ABkult-med-operas-logo-i-css%BB # Operas logo i css http://matthewjamestaylor.com/exploring-web-typography/index.html # Tullete eksempel på hvordan det IKKE bør gjøres
Standarder http://www.nettredaktor.no/Fakta_om_Web/ ?module=Articles;action=Article.publicShow;ID=2262 http://www.w3.org/TR/CSS2/sample.html # Typiske standardverdier for formatering (css)
Annet http://www.phpro.org/examples/Calculate-Age-With-PHP.html # Finn din alder vha. php (gg: "calculate age" php) http://www.mathcats.com/explore/age/calculator.html # Finn din alder vha. javascript http://www.calculateage.info/ # Metodiske tips http://webscripts.softpedia.com/script/Snippets/PHP-Calculate-Age-26195.html # Nedlastbar php-versjon http://www.tizag.com/phpT/examples/formex.php # php+html, eksempel
Sist endret 28.5.2010
Vannrett linje
- Unummerert liste
- Listeelement
Avsnitt
Tabell, hovedtagg
En rad i en tabell En kolonne i en rad Grupper elementer, som en blokk (Linjeskift før og etter) Grupper elementer, vanlig (uten linjeskift før og etter) Område for metainformasjon om dokumentetDokumentnavnet Metainformasjon om dokumentet Lenke til f.eks et stilsett Vanlige eksempler
Aller første linje, før (angir hva slags dokument du skriver)
Innenfor head-taggen
Nettsidens navn css">Innenfor body-taggen
Celle en Celle to - Punkt en
- Punkt to
-
Stikkord
• Konvensjoner: Skrivemåte, tagger, egenskaper og verdier • Viktig: Skill mellom form og innhold, dvs. formater mest mulig med css • NB: Vær pinlig nøyaktig! • God skrivepraksis: ◦ innrykk ◦ valg av linjeskift ◦ tabeller bare til tabeller (sparer plass, lettere å endre og vedlikeholde og mer fleksibelt, bl.a. for leselister) ◦ Ikke bruk rammer (kan ikke lenkes til, vanskelig å bruke, mindre tilgjengelig, mindre brukervennlig for leselister o.l.) ◦ OBS: Søppelpost, ikke e-postadresser i klartekst! • En nettsides tre grunnelementer: html, head og body (se rammeillustrasjonen ovenfor) • Grunnleggende formatering: em/i strong/b u p h1--h6 (NB: em, i, strong, b og u bør heller angis med css) • I
: Metainformasjon (DOCTYPE, lang m.m.), tittel og css-lenke • Bilder: img (og width, height og alt) • Lenker: a (og href title #) • Annet: br div span • Tabeller; table, th, td og tr • Ordnede og uordnede lister: ul, ol, li • ◦ Avansert: skjemaer (form input label m.m.)Grunnleggende css
Konvensjoner
• Alle tagger starter med { og slutter med } • Hver verdiangivelse avsluttes med ; • : settes mellom angivelsen og verdien (se eksempelet nedenfor) • " brukes til å utheve verdier/valg • For å skape oversikt og struktur ◦ Linjeskift markerer en ny tagg ◦ innrykk brukes til å markere hva som er underordnet et annet element • /* Dette er en css-kommentar */
Med et stilsett kan man bestemme hvordan et html-dokument skal se ut. Alle HTML-tagger kan man angi egenskapene til. F.eks. vil man ofte endre body (hele dokumentet), H1, H2 osv (overskrifter), P (avsnitt), img (bilder) og A (lenker).
Eksempel body { color: red; /* NB: Farger anbefales det helst å angi som fargekoder, likevel virker fargenavn også helt fint */ background: yellow; background-image: url("mitt_bakgrunnsbilde.png"); /* NB: Bruk enten en bakgrunnsfarge eller et bakgrunnsbilde */ text-align: center; font-weight: bolder; text-decoration: underline; }
Html-kode
Innholdet i div-taggen som skal sentreresTilhørende css-kode (velg en av disse to) div.midtstilt { margin-left: 30%; margin-right: 30%; width: 40%; } /* flytende bredde */ div.midtstilt { margin-left: auto; margin-right: auto; width: 300px; } /* Fast bredde */
/* NB: Hvis det er et bilde, bruk også koden over, men legg til «display: block;» i stilsettet. */ Viktige tagger
• body, p, img • div og span • For tekst ◦ color ◦ background ◦ font-weight ◦ text-decoration ◦ text-align ◦ a (a:hover, a:active, a:visited) ◦ :first-line ◦ :first-letter • For blokkelementer ◦ padding ◦ border (eksempel: border: 1px solid blue;) /* Solid kan f.eks. erstattes med dotted eller dashed */ ◦ margin • .klassenavn • #identifikasjonsmerke
Blokkmodellen
Avstanden mellom ramma og blokkelementet gir luft rundt bildet (padding). Avstanden mellom ramma og omgivende elementer er margen (margin).
Stikkord
• Konvensjoner: Skrivemåte, egenskaper og verdier • body: color og background (bilde, farge, fast/flytende o.l.) • * gjelder alle elementer • Typiske tilpasninger: Størrelse (px, em, mm, cm, pt, %), farge (navn, #RGB, #RRGGBB o.l.), plassering (absolutt, relativ, fast m.m.) • Tilpasninger for hver av taggene • span (inline) som eget element og til egne stiler, ID og class for egne stiler • hierarkiet • Om blokkelementer, blokkløst (inline) og lister • Om boksmodellen: margin, padding og border (oppe, høyre, nede, venstre -- eller o+n, h+v) • Plassering: Om float • pseudo-klasser og -elementer (a:hover p:first-letter o.a.) • Avansert: ◦ Sammenheng (f.eks. b i en div) ◦ Arving av egenskaper fra et overordnet til et underordnet element ◦ Tilordning: Lokalt, for en nettside og i en egen fil ◦ Konflikter, hva nå? Hvordan prioriteres valgene dine? http://www.w3.org/TR/CSS2/cascade.html#specificity • Godt eksempel: http://www.htmldog.com/guides/cssbeginner/conclusion
Konkrete tips
Nyttig: • CSS-meny (vannrett og loddrett) • Midtstilling ◦ img { margin: 0 auto; width: 200px } /* Width er lik bredden på bildet */ • Meny
Midstilt ramme (vannrett) div.midtstilt1 { margin-left: 10%; margin-right: 10%; } /* flytende bredde */ div.midtstilt2 { margin-left: auto; margin-right: auto; width: 850px; } /* Fast bredde */
Egne testsider http://bojer.no/Axel/nettsidetips.shtml # Min oppsummering av noen css-tips http://bojer.no/Axel/Testsider/testside-hover-meny.shtml # Fem eksempler på nedtrekksmenyer med ren css http://bojer.no/Axel/Testsider/testside-hover.shtml # Tre eksempler på bilder som vises ved mus-over Midstilt 1 Midstilt 2 Midstilt 3 (rose) # Tre eksempelsider med midstilling http://bojer.no/Axel/Testsider/testside-diverse.shtml # Blanding av tekst og bilder, bildekart http://bojer.no/Axel/Testsider/testside-bildesirkel.html # Bilder i en ramme i en sirkel og med mus-over http://bojer.no/Axel/Testsider/testside-bokser.html # Div- blokker med ulike valg for taggen «position»
Annet
• Rettigheter: Wikipedia og andre frie kilder • Nettvett og copyright • Bruk av FTP (FireFTP + putty (ssh) ) Nyttige nettsider
Nettdesign http://www.nettredaktor.no/Fakta_om_Web/ ?module=Articles;action=Article.publicShow;ID=2262 http://www.nettredaktor.no/Fakta_om_Web/Begreper/ http://www.maxdesign.com.au/articles/checklist # Liste over alt en god nettside bør ha http://www.mardiros.net/liquid-design.html # Om flytende design, tilpasningsdyktige sideoppsett http://no.wikipedia.org/wiki/Peter_Morville http://en.wikipedia.org/wiki/Peter_Morville http://en.wikipedia.org/wiki/Tableless_web_design # Hvorfor css er bedre egnet enn tabeller til sideoppsett http://en.wikipedia.org/wiki/CSS_framework # Ferdiglagde stilsett for store nettsteder
Grunnleggende om å lage nettsider http://css.maxdesign.com.au/ # Flotte trinn- for-trinn-veiledninger med css og html http://www.htmldog.com # Oversiktlig og ryddig side for både nybegynnere og viderekomne http://www.tizag.com/cssT # Innføring i css og html + eksempler
Fargekoder http://www.html-color-names.com # Liste over fargenavnene http://www.w3schools.com/tags/ref_colornames.asp # Liste over fargekodene http://www.lynda.com/resources/webpalette.aspx # 216 Nettsikre farger (de 40 siste av de 256 er ulike på pc og mac) http://en.wikipedia.org/wiki/Dither#Digital_photography_and_image_processing -- eksempelbilde med og uten nettsikre farger http://en.wikipedia.org/wiki/Web_colors # bakgrunnsinformasjon m.m.
Nyttige verktøy http://browsershots.org # Sjekk nettsiden din i en hel menge ulike nettlesere http://html-color-codes.com/ # Finn fargekoden for din farge http://notepad-plus.sourceforge.net/uk/site.htm # Skriv html og css som ren tekst i Windows http://www.html-kit.com/favicon # Lag ditt eget favicon http://www.problogineer.com/how-to-do-force-refresh-firefox # Tvungen omstart av Firefox http://www.cubestat.com/ # Statistikk for en valgt nettside http://www.allfreebackgrounds.com # Gratis bakgrunnsbilder http://www.webpagebackground.com # Gratis bakgrunnsbilder http://www.grsites.com/ # Gratis bakgrunnsbilder, knapper m.m. http://silviahartmann.com/background-tile/ # Nydelige naturbakgrunner, fliser http://www.image-maps.com/ # Lag bildekart automatisk
HTML http://www.w3schools.com/html/default.asp # Grunnleggende om html (en) http://www.htmldog.com/guides/htmlbeginner # Grunnleggende om html (en) http://www.web-amp.com/html/ # Grunnleggende om html (no)
CSS http://www.2tp.no/webdesign/css/ # Norsk side om css http://www.garshol.priv.no/download/text/css-intro.html # Innføring i css (norsk) http://www.maxdesign.com.au/articles/workshop/ # Om grunnleggende css http://www.maxdesign.com.au/articles/process/ # Hvordan lage en god nettside med css http://www.w3schools.com/css/ # Grunnleggende om css http://www.lesliefranke.com/files/reference/csscheatsheet.html # en nettside med kort oversikt over css-kodene http://www.csscentering.com/css-examples/css-examples-index.html # Eksempler som viser effekten av mange ulike css-valg http://articles.sitepoint.com/article/introduction-css-shorthand # Plassbesparende kortformer http://www.456bereastreet.com/archive/200502/ efficient_css_with_shorthand_properties/ http://www.veign.com/downloads/guides/qrg0007.pdf # Tosiders utskrivbar oversikt over alle css-kodene http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ # En sides utskrivbar oversiktsark over css-kodene http://www.blooberry.com/indexdot/css/propindex/all.htm # Alfabetisk oversikt over alle css-kodene, avansert http://www.csszengarden.com/tr/norwegian/?cssfile=/207/207.css&page=0 # Viser styrken ved css med gode eksempler http://www.barelyfitz.com/screencast/html-training/css/positioning/ # Plassering av elementer forklart en og en http://www.sohtanaka.com/web-design/beginners-checklist-debugging-css-bug/
Htm- og Css-triks http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses- compared/ http://www.smashingmagazine.com/2009/07/20/50-new-css-techniques-for-your-next- web-design/ http://www.sohtanaka.com/web-design/css-beginners-do%E2%80%99s-and- dont%E2%80%99s-part-2/ http://www.sohtanaka.com/web-design/css-beginners-dos-and-donts-part-1/ http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml # css-triks http://www.dynamicdrive.com/style/csslibrary # Mange gode css-eksempler til ulike formål http://matthewjamestaylor.com/blog # Mange gode css-eksempler til ulike formål http://www.the-art-of-web.com/css # css-eksempler til ulike formål http://www.w3schools.com/css/css_positioning.asp # Generelle regler for plassering av elementer med css http://www.maxdesign.com.au/articles/center # Vannrett sentrering med css, tre eksempler http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross- browser-support http://matthewjamestaylor.com/centered-menus/ # Vannrett midtstilt css-meny http://www.bjornenki.com/translations/w3_style_examples_007_center # Om css og sentrering av blokkelementer http://css-discuss.incutio.com/wiki/Centering_Block_Element # Vannrett sentrering med css http://blog.themeforest.net/tutorials/vertical-centering-with-css # Loddrett sentrering med css, mange forslag, godt forklart http://www.webtoolkit.info/css-vertical-align.html # Loddrett sentrering med css (display: table;) http://www.sitecrafting.com/blog/to-center-div/ # Loddrett sentrering av en div-ramme med css (vha. 50%+50%+nestet div) http://www.emblematiq.com/blog/vertical_align_with_css/assets/03.html # Loddrett sentrering med css (både for IE og andre) http://www.jakpsatweb.cz/css/css-vertical-center-solution.html # Loddrett sentrering med css (vha. plassering og nestede div-tagger) http://d-graff.de/fricca/center.html # Loddrett sentrering med css. Omfattende løsning, men ser bra ut http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css # Loddrett sentrering med css, omfattende forklaring http://tom.me.uk/html-to-css/center-vertically.html # Loddrett sentrering med css, en løsning. NB: Ikke for IE! http://htmlhelp.com/reference/css/text/vertical-align.html # Forklaring av egenskapen «vertical-align» mht. bilder http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm # Flyt tekst rundt et ujevnt bilde http://www.seoconsultants.com/css/menus/tutorial/ # Veiledning: Lag menyer med css http://www.cssmenumaker.com/ # Nett-verktøy for å lage css-menyer http://www.cssnewbie.com/horizontal-dropdown-menus/ # Lag menyer med css http://ago.tanfa.co.uk/css/examples/menu/tutorial-v.html#vs2 # Dynamisk meny med css, grundig forklart http://www.w3.org/TR/CSS2/cascade.html#specificity # Beregn hvor stor vekt en regel har i css over en annen http://www.pixy.cz/blogg/clanky/csshiermenu/ # Dynamisk meny med css NB: Ikke for IE! http://www.alistapart.com/articles/taminglists/ # Gode eksempler på liste-egenskaper http://www.instantshift.com/2009/01/11/30-excellent-css-based-navigation-and- buttons-tutorial http://www.communitymx.com/content/article.cfm?page=2&cid=53F70 # Støtte for liksom-tabeller med css, egenskaper http://www.w3schools.com/css/pr_class_display.asp # Støtte for liksom-tabeller med css, egenskaper http://www.quirksmode.org/css/display.html # Støtte for liksom-tabeller med css, egenskaper http://www.kavoir.com/2009/02/css-text-over-image.html # Eksempel: tekst over et bilde med css http://www.xs4all.nl/~peterned/csshover.html # mus-over- effekter, grundig forklaring http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css # Vis noe annet når musa holdes over http://www.webmasterworld.com/forum83/4224.htm # Vis noe annet når musa holdes over (forumposting) http://www.sohtanaka.com/web-design/css-on-hover-image-captions # Vis noe annet når musa holdes over (med eksempelside) http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger http://www.position-relative.com/tutorials/tute1_css_bg_image.php # Lag bildekart med css, enkelt eksempel uten mus-over http://css.flepstudio.org/en/css-tutorials/image-map-in-css.html # Lag bildekart med css, enkelt eksempel uten mus-over http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide- http://designreviver.com/tutorials/css-image-map-techniques-and-tutorials # Lag bildekart med css http://www.cssplay.co.uk/menu/imap.html # Lag bildekart med css http://www.frankmanno.com/ideas/css-imagemap # Lag bildekart med css http://www.webreference.com/programming/image_map http://wellstyled.com/css-underscore-hack.html # Lag kode som bare virker i IE http://www.display-inline.fr/projects/css-gradient/ # css3: lag fargeoverganger med css http://www.dynamicdrive.com/style/csslibrary/item/ css3_rounded_corners_using_border_radius # css3: avrundede hjoerner http://www.digi.no/838046/%ABkult-med-operas-logo-i-css%BB # Operas logo i css http://matthewjamestaylor.com/exploring-web-typography/index.html # Tullete eksempel på hvordan det IKKE bør gjøres
Standarder http://www.nettredaktor.no/Fakta_om_Web/ ?module=Articles;action=Article.publicShow;ID=2262 http://www.w3.org/TR/CSS2/sample.html # Typiske standardverdier for formatering (css)
Annet http://www.phpro.org/examples/Calculate-Age-With-PHP.html # Finn din alder vha. php (gg: "calculate age" php) http://www.mathcats.com/explore/age/calculator.html # Finn din alder vha. javascript http://www.calculateage.info/ # Metodiske tips http://webscripts.softpedia.com/script/Snippets/PHP-Calculate-Age-26195.html # Nedlastbar php-versjon http://www.tizag.com/phpT/examples/formex.php # php+html, eksempel
Sist endret 28.5.2010
- Nummerert liste